{% extends 'base.html' %}

{% block title %}广告主控制面板{% endblock %}

{% block content %}
<!DOCTYPE html>
<html>
<head>
    <title>广告审核中心</title>
    <style>
        :root {
            --primary-color: #2c3e50;
            --success-color: #27ae60;
            --danger-color: #e74c3c;
            --warning-color: #f1c40f;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f4f6f8;
            margin: 0;
            padding: 40px 20px;
            color: #34495e;
        }

        .audit-container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
        }

        h2 {
            font-size: 32px;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 3px solid var(--primary-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        h2::before {
            content: '📊';
            font-size: 1.2em;
        }

        /* 合同列表样式 */
        .contract-section {
            margin-bottom: 50px;
        }

        .contract-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }

        .contract-card {
            background: #ffffff;
            padding: 20px;
            border-left: 4px solid var(--primary-color);
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            transition: transform 0.2s;
        }

        .contract-card:hover {
            transform: translateY(-3px);
        }

        .contract-id {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 8px;
        }

        .status-tag {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 0.9em;
            margin-top: 12px;
        }

        .status-pending { background: #fef5e7; color: #f39c12; }
        .status-approved { background: #e8f6f3; color: var(--success-color); }
        .status-rejected { background: #fdedec; color: var(--danger-color); }

        /* 审核表格样式 */
        .audit-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 30px;
            overflow-x: auto;
        }

        .audit-table th,
        .audit-table td {
            padding: 16px;
            text-align: left;
            border-bottom: 1px solid #ecf0f1;
        }

        .audit-table th {
            background: var(--primary-color);
            color: white;
            font-weight: 500;
        }

        .audit-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .audit-table tr:hover {
            background-color: #f4f6f6;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 6px 16px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.2s;
        }

        .btn-success {
            background: var(--success-color);
            color: white;
        }

        .btn-success:hover {
            background: #219651;
            box-shadow: 0 2px 8px rgba(39, 174, 96, 0.3);
        }

        .btn-danger {
            background: var(--danger-color);
            color: white;
        }

        .btn-danger:hover {
            background: #c44133;
            box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #7f8c8d;
            border: 2px dashed #bdc3c7;
            border-radius: 8px;
            margin: 30px 0;
        }

        @media (max-width: 768px) {
            .audit-container {
                padding: 25px;
                margin: 20px;
            }
            
            .contract-grid {
                grid-template-columns: 1fr;
            }
            
            .audit-table {
                font-size: 0.9em;
            }
        }
    </style>
</head>
<body>
    <div class="audit-container">
        <h2>广告审核中心</h2>

        <div class="contract-section">
            <h3>📋 所有硬广合同</h3>
            {% if hard_contracts %}
            <div class="contract-grid">
                {% for c in hard_contracts %}
                <div class="contract-card">
                    <div class="contract-id">合同 #{{ c.id }}</div>
                    <div class="contract-user">用户：{{ c.user.username }}</div>
                    <div class="status-tag status-{{ c.status|lower }}">
                        {{ c.get_status_display }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">📭 当前没有硬广合同</div>
            {% endif %}
        </div>

        <div class="contract-section">
            <h3>📄 所有软广合同</h3>
            {% if soft_contracts %}
            <div class="contract-grid">
                {% for c in soft_contracts %}
                <div class="contract-card">
                    <div class="contract-id">合同 #{{ c.id }}</div>
                    <div class="contract-media">平台：{{ c.media }}</div>
                    <div class="status-tag status-{{ c.status|lower }}">
                        {{ c.get_status_display }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty-state">📭 当前没有软广合同</div>
            {% endif %}
        </div>

        <h3>📝 待审广告内容</h3>
        {% if ad_contents %}
        <table class="audit-table">
            <thead>
                <tr>
                    <th>内容ID</th>
                    <th>合同ID</th>
                    <th>编辑</th>
                    <th>内容</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for c in ad_contents %}
                <tr>
                    <td>{{ c.id }}</td>
                    <td>#{{ c.contract.id }}</td>
                    <td>{{ c.editor.username }}</td>
                    <td>{{ c.content|truncatechars:40 }}</td>
                    <td>
                        <div class="status-tag status-{{ c.status }}">
                            {{ c.get_status_display }}
                        </div>
                    </td>
                    <td>
                        {% if c.status == 'pending' %}
                        <div class="action-buttons">
                            <a href="{% url 'approve_ad_content' c.id %}" class="btn btn-success">✅ 通过</a>
                            <a href="{% url 'reject_ad_content' c.id %}" class="btn btn-danger">❌ 驳回</a>
                        </div>
                        {% else %}
                        <span class="processed-text">已处理</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% for c in hard_ad_contents %}
                <tr>
                    <td>{{ c.id }}</td>
                    <td>#{{ c.contract.id }}</td>
                    <td>{{ c.editor.username }}</td>
                    <td>{{ c.content|truncatechars:40 }}</td>
                    <td>
                        <div class="status-tag status-{{ c.status }}">
                            {{ c.get_status_display }}
                        </div>
                    </td>
                    <td>
                        {% if c.status == '待审核' %}
                        <div class="action-buttons">
                            <a href="{% url 'approve_ad_content' c.id %}" class="btn btn-success">✅ 通过</a>
                            <a href="{% url 'reject_ad_content' c.id %}" class="btn btn-danger">❌ 驳回</a>
                        </div>
                        {% else %}
                        <span class="processed-text">已处理</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">🎉 当前没有待审内容</div>
        {% endif %}
    </div>
</body>
</html>
{% endblock %}